Графика и мультимедиа на Web-странице

World Wide Web в первые годы своего существования служила для размещения сугубо текстовой информации. Лишь с появлением браузера Mosaic стало возможным просматривать ресурсы, содержащие графические изображения. Появление изображений в Web привело к резкому увеличению интенсивности потока данных через глобальную сеть. Действительно, возможность размещать на Web-страницах различную графическую информацию многократно увеличило количество пользователей, заинтересованных в доступе к ресурсам Web.

Форматы графических файлов для WWW

Данные об изображениях хранятся в файлах графических форматов. Существует достаточно много форматов, обеспечивающих организацию графических данных (например, BMP, EPS, GIF, JPEG, PCX, TIFF и множество других). Ho посетитель вашей страницы увидит графическое изображение лишь в том случае, если его браузер поддерживает данный графический формат. Поэтому изображения создаются в тех форматах, которые понимают большинство браузеров. К таким форматам относятся следующие:

✓ GIF (сокращение от Graphics Interchange Format — графический формат обмена), имеет расширение. gif;

✓ JPEG (сокращение от Joint Photographic Experts Group — объединенная группа экспертов фотографии), имеет расширение. jpg или. jpeg;

✓ PNG (сокращение от Portable Network Graphics — переносимая сетевая графика), имеет расширение. png.

Формат GIF. Является стандартом для Web-графики, достигается высокая степень сжатия. GIF обладает замечательными свойствами, которые позволяют создавать прозрачные области на изображении и назначать воспроизведение изображений в режиме чересстрочной развертки. C помощью этого формата в одном файле можно хранить несколько изображений и создавать простые анимации. Восьми-битовая схема кодирования цвета, принятая в GIF, ограничивает глубину цвета (всего 28=256 цветов). Поэтому в этом формате обычно сохраняются простые рисунки с небольшим количеством цветов. Однако имеются некоторые формальные ограничения на использование GIF, поскольку чрезвычайно эффективный алгоритм сжатия данных, примененный в этом формате, защищен патентом.

Формат JPEG. Подобно формату GIF считается стандартом для Web-графики и обеспечивает высокую степень сжатия. Поскольку в этом формате принята 24-битовая схема кодирования цветов, в нем можно сохранять почти семнадцать миллионов цветов (224=16777216) и получать высокое качество проработки деталей изображения. Этот формат позволяет достичь компромисса между степенью сжатия и качеством изображения (с увеличением качества уменьшается степень сжатия и наоборот). JPEG часто применяется для изображений с высоким качеством проработки деталей (например, фотографии или графика с большим количеством цветов).

Формат PNG. Этот формат обладает всеми возможностями формата GIF, а также рядом дополнительных достоинств. Во-первых, PNG поддерживает очень «глубокий» цвет (глубина цвета — 48 бит). Во-вторых, файлы PNG более компактны: в них выполняется сжатие изображения по вертикали и по горизонтали. Наконец, данный формат не имеет тех юридических сложностей, что формат GIF. Единственным недостатком PNG является то, что этот формат пока поддерживается не всеми браузерами.

Копировать рисунок из WWW проще всего следующим образом. Щелкните правой кнопкой мыши на изображении и выберите в контекстном меню команду "Сохранить рисунок как". В появившемся диалоге задайте имя файла и папку, в которой он будет храниться, после чего нажмите кнопку "Сохранить".

Вторым способом получения изображения на Web-странице является использование гиперссылки. Напомним, что ссылка задается с помощью якорного элемента вида:

Подобный источник изображения имеет один недостаток: изображение становится недоступным, если изменился его URL.

Вставка изображения (элемент IMG)

Процедура вставки изображения на Web-страницу достаточно проста и выполняется одиночным тегом , который может быть размещен в любом месте элемента "BODY".

При этом URL-адрес изображения задается значением атрибута src (название происходит от слова Source — источник). Данный атрибут относится в числу обязательных в теге IMG.

Допустим, вы хотите разместить на странице картинку "helicopter .jpg" с изображением вертолета. Для этого сохраните файл с изображением в той же папке, что и сам HTML-документ, а в документ введите тег IMG src="helicopter.jpg". Полный код документа может иметь вид:

В результате вы получите на экране браузера картинку, показанную на Рисунке 1. По умолчанию браузер отобразит изображение, выровненное по левому краю страницы.

Рисунок 1. Пример размещения изображения на Web-странице